<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="4">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>今日累计采购</span>
             <el-tooltip class="item" effect="dark" content="统计今日采购单据的总金额" placement="top">
                   <i style="float: right; padding: 3px 0" class="el-icon-warning-outline" ></i>
                </el-tooltip>
          </div>
          <div class="body">
            <p>
              <strong style="font-size: 2rem;">￥<countTo :startVal='0' :endVal='purchaserTodayTotal' :duration='3000' :decimals='2'></countTo> </strong>
            </p>
          </div>
        </el-card>
      </el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="4">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>今日累计销售</span>
            <el-tooltip class="item" effect="dark" content="统计今日销售单据的总金额" placement="top">
                  <i style="float: right; padding: 3px 0" class="el-icon-warning-outline" ></i>
               </el-tooltip>
          </div>
          <div class="body">
            <p>
               <strong style="font-size: 2rem;">￥<countTo :startVal='0' :endVal='saleTodayTotal' :duration='3000' :decimals='2'></countTo> </strong>
            </p>
          </div>
        </el-card>
      </el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="4">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>今日累计零售</span>
            <el-tooltip class="item" effect="dark" content="统计今日零售单据的总金额" placement="top">
                  <i style="float: right; padding: 3px 0" class="el-icon-warning-outline" ></i>
               </el-tooltip>
          </div>
          <div class="body">
            <p>
               <strong style="font-size: 2rem;">￥<countTo :startVal='0' :endVal='retailTodayTotal' :duration='3000' :decimals='2'></countTo> </strong>
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="4">
              <el-card class="update-log">
                <div slot="header" class="clearfix">
                  <span>本月累计采购</span>
 <el-tooltip class="item" effect="dark" content="统计本月采购单据的总金额" placement="top">
                   <i style="float: right; padding: 3px 0" class="el-icon-warning-outline" ></i>
                </el-tooltip>                </div>
                <div class="body">
                  <p>
                    <strong style="font-size: 2rem;">￥<countTo :startVal='0' :endVal='purchaserMonthTotal' :duration='3000' :decimals='2'></countTo> </strong>
                  </p>
                </div>
              </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="4">
                    <el-card class="update-log">
                      <div slot="header" class="clearfix">
                        <span>本月累计销售</span>
                        <el-tooltip class="item" effect="dark" content="统计本月销售单据的总金额" placement="top">
                              <i style="float: right; padding: 3px 0" class="el-icon-warning-outline" ></i>
                           </el-tooltip>
                      </div>
                      <div class="body">
                        <p>
                           <strong style="font-size: 2rem;">￥<countTo :startVal='0' :endVal='saleMonthTotal' :duration='3000' :decimals='2'></countTo> </strong>
                        </p>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="12" :lg="4">
                          <el-card class="update-log">
                            <div slot="header" class="clearfix">
                              <span>本月累计零售</span>
                              <el-tooltip class="item" effect="dark" content="统计本月零售单据的总金额" placement="top">
                                    <i style="float: right; padding: 3px 0" class="el-icon-warning-outline" ></i>
                                 </el-tooltip>
                            </div>
                            <div class="body">
                              <p>
                                 <strong style="font-size: 2rem;">￥<countTo :startVal='0' :endVal='retailMonthTotal' :duration='3000' :decimals='2'></countTo> </strong>
                              </p>
                            </div>
                          </el-card>
                        </el-col>

    </el-row>

    <el-divider />
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>采购统计</span>
          </div>
          <div class="body" style="height: 500px;" id="echartsOne">
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>销售统计</span>
          </div>
          <div class="body" style="height: 500px;" id="echartsTwo">
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>零售统计</span>
          </div>
          <div class="body" style="height: 500px;" id="echartsThree">
          </div>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>
<script>
import { todayReport,monthReport ,lastSixMonthReport} from "@/api/bill/retail";
import countTo from 'vue-count-to';
import Vue from 'vue';
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;
export default {
  name: "Index",
  components:{
        countTo
      },
  data() {
    return {
      // 版本号
      version: "3.8.0",
      purchaserTodayTotal:1000.00,
      saleTodayTotal:2000,
      retailTodayTotal:3000,
      purchaserMonthTotal:1000.00,
      saleMonthTotal:2000,
      retailMonthTotal:3000,
      systemWorkStatus:{
        total:[1,12,11],
        offline:[22,112,12],
      },
      //月份数据 ，x轴
      months:[],
      purchaseData:[],
      saleData:[],
      retailData:[],
      purchaseReturnData:[],
      saleReturnData:[],
      retailReturnData:[]
    };
  },
  mounted() {
  	window.addEventListener('resize', () => {
  		this.$echarts.init(document.getElementById("echartsOne")).resize();
  		this.$echarts.init(document.getElementById("echartsTwo")).resize();
  		this.$echarts.init(document.getElementById("echartsThree")).resize();
  	});
  },
  created() {
     this.getTodayReport();
     this.getMonthReport();
     this.getLastSixMonthReport();
  },
  methods: {
    getTodayReport(){
      todayReport().then(res =>{
         console.log(res)
         this.purchaserTodayTotal = res.data.purchaserTodayTotal;
         this.saleTodayTotal = res.data.saleTodayTotal
         this.retailTodayTotal = res.data.retailTodayTotal
      });
    },
    getMonthReport(){
      monthReport().then(res =>{
         console.log(res)
         this.purchaserMonthTotal = res.data.purchaserMonthTotal;
         this.saleMonthTotal = res.data.saleMonthTotal
         this.retailMonthTotal = res.data.retailMonthTotal
      });
    },
    getLastSixMonthReport(){
      lastSixMonthReport().then(res =>{
          console.log(res)
          this.months = res.data.months;
          this.purchaseData = res.data.purchaseData.map(item => item.toFixed(2));
          this.purchaseReturnData = res.data.purchaseReturnData.map(item => item.toFixed(2))
          this.saleData = res.data.saleData.map(item => item.toFixed(2))
          this.saleReturnData = res.data.saleReturnData.map(item => item.toFixed(2))
          this.retailData = res.data.retailData.map(item => item.toFixed(2))
          this.retailReturnData = res.data.retailReturnData.map(item => item.toFixed(2));
          this.echartsInit('echartsOne');
          this.echartsInit('echartsTwo');
          this.echartsInit('echartsThree');
      });
    },
    //系统设备运行状态
    echartsInit(id) {
      let yAxisNames = ['零售','零售退货'];
      let yData = [this.retailData,this.retailReturnData];
      if(id =='echartsOne'){
        yAxisNames =['采购','采购退货'];
        yData = [this.purchaseData,this.purchaseReturnData];
      }else if(id =='echartsTwo'){
        yAxisNames =['销售','销售退货'];
        yData = [this.saleData,this.saleReturnData];
      }
      let obj =  document.getElementById(id);
    	let myChart = this.$echarts.init(obj);
    	myChart.setOption({
    		// legend: {
    		// 	x: 'right',
    		// 	// y: this.remToPx(.05),
    		// 	// // icon: "circle",
    		// 	// itemGap: this.remToPx(.2),
    		// 	// itemWidth: this.remToPx(.24),
    		// 	// itemHeight: this.remToPx(.14),
    		// 	data: this.months,
    		// 	textStyle: {
    		// 		color: '#ffffff',
    		// 		fontSize: this.remToPx(.16),
    		// 	}
    		// },
    		tooltip: {
    			trigger: 'axis',
    			borderWidth: 0,
    			backgroundColor: 'rgba(0,0,0,.5)',
    			textStyle: {
    				color: '#fff',
    				fontSize: this.remToPx(.18),
    			},
    			confine: true,
    			// formatter: "{a} <br/>{b}: {c}个",
    			axisPointer: {
    				type: 'shadow'
    			}
    		},
    		grid: {
    			left: 0,
    			right: 0,
    			bottom: this.remToPx(.14),
    			top: this.remToPx(.52),
    			containLabel: true
    		},
    		xAxis: {
    			type: 'category',
    			splitLine: {
    				show: false
    			},
    			axisTick: {
    				show: false
    			},
    			axisLine: {
    				lineStyle: {
    					color: '#303133',
    					// type: 'dashed',
    				}
    			},
    			axisLabel: {
    				show: true,
    			},
    			data:this.months,
    		},
    		yAxis: {
    			name: '',
    			type: 'value',
          show: false,//显示刻度
    			axisTick: {
    				show: false
    			},
    			axisLine: {
    				show: false
    			},
    			axisLabel: {
    				show: false,
    				formatter: '{value}',
    				color: '#fff',
    				// fontSize: this.remToPx(.2),
    			}
    		},
    		series: [{
    			name: yAxisNames[0],
    			type: 'bar',
    			// stack: 'total',
    			barWidth: this.remToPx(.18),
    			itemStyle: {
    				normal: {
    					barBorderRadius: [0, 0, 0, 0],
    					color: new this.$echarts.graphic.LinearGradient(
    						0, 0, 1, 0,
    						[{
    								offset: 0,
    								color: '#166ab4'
    							},
    							{
    								offset: 1,
    								color: '#077cce'
    							}
    						]
    					)
    				}
    			},
    			data: yData[0],
    		}, {
    			name: yAxisNames[1],
    			type: 'bar',
    			// stack: 'total',
    			barWidth: this.remToPx(.18),
    			itemStyle: {
    				normal: {
    					barBorderRadius: [4, 4, 0, 0],
    					color: new this.$echarts.graphic.LinearGradient(
    						0, 0, 1, 0,
    						[{
    								offset: 0,
    								color: '#d7a304'
    							},
    							{
    								offset: 1,
    								color: '#d9c504'
    							}
    						]
    					)
    				}
    			},
    			data: yData[1],
    		}]

    	});
    },
    remToPx(rem) {
    	var fontSize = document.documentElement.style.fontSize;
    	return Math.floor(rem * fontSize.replace('px', ''));
    },
    // goTarget(href) {
    //   window.open(href, "_blank");
    // },

  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

/*  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  } */
}
</style>
